<template>
    <div class="w-full h-full bg-black grid grid-rows-24 grid-cols-1 gap-1">
        <!-- 第一个子区域，占据1行 -->
        <div class="row-span-1 
                    bg-customBlack font-bold text-white
                    flex items-center justify-center text-center
                    rounded-lg">
            工作区标题
        </div>

        <!-- 第二个子区域，占据剩余的23行 -->
        <div class="row-span-23  bg-black
                    grid grid-cols-4 gap-1">
            <!-- 第一个竖向子区域，列宽比为5 -->
            <div class="col-span-3 bg-black 
                        grid grid-rows-3 gap-1">
                <!-- 第一个横向子区域，跨2行 -->
                <div class="row-span-2 bg-black
                            grid grid-cols-13 gap-1">
                    <!-- 第一个竖向子区域，跨1列 -->
                    <div class="col-span-4 
                            bg-black rounded-lg flex flex-col
                            grid grid-rows-10">
                        <!-- 资源管理区域 -->
                        <!-- 第一行为上传按钮 -->
                        <div class="row-span-1 bg-customBlack text-white flex flex-col 
                                    border-b-1 border-black pt-2 pb-2 rounded-t-lg
                                    flex items-center justify-center text-center">
                                <div class="flex items-center justify-center
                                            rounded-lg pt-2 pb-2 text-gray
                                            py-2 px-4 bg-white bg-opacity-10
                                            hover:bg-opacity-20 hover:text-white hover:ring-white-500
                                            focus:outline-none focus:ring-1 focus:ring-white-500">
                                    <input type="file" class="sr-only" id="file-upload" name="file-upload" @change="selectFile" multiple>
                                    <label for="file-upload" class="cursor-pointer hover:font-bold">上传素材</label>
                                </div>
                                <el-progress :percentage="uploadProgress" 
                                            :show-text="false" v-if="uploadProgress=0"
                                            class="w-full mt-1" />
                        </div>
                        <!-- 第二行为素材展示区域 flex flex-row flex-wrap items-start-->
                        <div class="row-span-9 bg-customBlack rounded-b-lg p-2 h-full m-0 p-0 overflow-y-auto scrollbar-hide">
                            <div class="flex flex-row flex-wrap flex-content-start justify-center 
                                        h-full m-0 p-0 max-h-100">
                                <new-card v-for="media in allMedias.value" :key="media.mediaId" @clickEvent="handleClick"
                                :imgUrl="media.mediaFirstFrame" :title="media.mediaTitle" :type="media.mediaType"/>
                            </div>
                        </div>
                    </div>
                    <!-- 第二个竖向子区域，跨2列 -->
                    <div class="col-span-9 
                            bg-customBlack text-white
                            flex items-center justify-center
                            rounded-lg m-0 p-1">
                        <!-- 合成预览区域 -->
                        <canvas-card :videoArray="videoList"/>
                    </div>
                </div>
                <!-- 第二个横向子区域，跨1行 -->
                <div class="row-span-1 
                            bg-customBlack text-white
                            flex flex-col justify-start text-center
                            rounded-lg w-full m-0 p-0 
                            ">
                    <!-- 插入开始 -->
                    <div class="mt-5">
                        <div class="flex flex-row w-full m-0 pl-5 pr-5 
                                        justify-between items-center">
                            <div class="flex flex-row items-center justify-between">
                                <div class="top-button-left pl-5 pr-5">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="8.234"
                                        height="8.234"
                                        viewBox="0 0 8.234 8.234">
                                        <path
                                            id="路径_1555"
                                            data-name="路径 1555"
                                            d="M129.175,132.449l1.213,1.137c.178.18.361.471.183.651a.4.4,0,0,1-.6,0l-1.859-1.882a.363.363,0,0,1-.01-.512l1.869-1.911a.4.4,0,0,1,.6,0c.178.18-.005.471-.183.651l-1.2,1.181h4.084a3.045,3.045,0,0,1,2.963,3.064,3.172,3.172,0,0,1-2.963,3.2h-4.355c-.25,0-.46-.116-.46-.366s.21-.32.46-.32h4.319a2.8,2.8,0,0,0,2.313-2.518,2.648,2.648,0,0,0-2.313-2.377h-4.063Z"
                                            transform="translate(-128.003 -129.796)"
                                            fill="#fff"/>
                                    </svg>
                                </div>

                                <div class="top-button-left pl-5 pr-5">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="8.234"
                                        height="8.234"
                                        viewBox="0 0 8.234 8.234">
                                        <path
                                            id="路径_1556"
                                            data-name="路径 1556"
                                            d="M7.063,2.653,5.849,3.79a1.248,1.248,0,0,0-.129.152.814.814,0,0,0-.1.173.386.386,0,0,0-.03.173.242.242,0,0,0,.071.152.474.474,0,0,0,.144.1.377.377,0,0,0,.311,0,.473.473,0,0,0,.144-.1L8.123,2.558a.385.385,0,0,0,.081-.12.373.373,0,0,0,.03-.136.353.353,0,0,0-.023-.136.345.345,0,0,0-.078-.12L6.265.135a.473.473,0,0,0-.144-.1.377.377,0,0,0-.311,0,.473.473,0,0,0-.144.1.242.242,0,0,0-.071.152.386.386,0,0,0,.03.173.814.814,0,0,0,.1.173,1.246,1.246,0,0,0,.129.152l1.2,1.181H2.963a2.815,2.815,0,0,0-1.156.248,3.005,3.005,0,0,0-.942.669,3.148,3.148,0,0,0-.633.976A3.08,3.08,0,0,0,0,5.03,3.244,3.244,0,0,0,.232,6.222,3.429,3.429,0,0,0,.865,7.247a3.085,3.085,0,0,0,.942.717,2.635,2.635,0,0,0,1.156.27H7.318A.684.684,0,0,0,7.5,8.212a.45.45,0,0,0,.146-.067.32.32,0,0,0,.1-.114.352.352,0,0,0,.037-.163.311.311,0,0,0-.037-.155.264.264,0,0,0-.1-.1A.463.463,0,0,0,7.5,7.563a.952.952,0,0,0-.177-.015H3a1.712,1.712,0,0,1-.826-.239A2.954,2.954,0,0,1,1.43,6.7a3.266,3.266,0,0,1-.537-.814A2.108,2.108,0,0,1,.686,5.03,1.965,1.965,0,0,1,.893,4.2a2.943,2.943,0,0,1,.537-.766,2.846,2.846,0,0,1,.743-.56A1.835,1.835,0,0,1,3,2.653H7.063Z"
                                            fill="#fff"/>
                                    </svg>
                                </div>

                                <div class="top-button-left pl-5 pr-5">
                                    <svg
                                        id="组_2943"
                                        data-name="组 2943"
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="7.6"
                                        height="8.235"
                                        viewBox="0 0 7.6 8.235">
                                        <rect
                                            id="矩形_2307"
                                            data-name="矩形 2307"
                                            width="1"
                                            height="8.235"
                                            transform="translate(1.8)"
                                            fill="#fff"/>
                                        <rect
                                            id="矩形_2308"
                                            data-name="矩形 2308"
                                            width="1"
                                            height="8.235"
                                            transform="translate(4.8)"
                                            fill="#fff"/>
                                        <rect
                                            id="矩形_2309"
                                            data-name="矩形 2309"
                                            width="2.8"
                                            height="1.2"
                                            fill="#fff"/>
                                        <rect
                                            id="矩形_2310"
                                            data-name="矩形 2310"
                                            width="2.8"
                                            height="1.2"
                                            transform="translate(4.8)"
                                            fill="#fff"/>
                                        <rect
                                            id="矩形_2311"
                                            data-name="矩形 2311"
                                            width="2.8"
                                            height="1.2"
                                            transform="translate(4.8 7.034)"
                                            fill="#fff"/>
                                        <rect
                                            id="矩形_2312"
                                            data-name="矩形 2312"
                                            width="2.8"
                                            height="1.2"
                                            transform="translate(0 7.034)"
                                            fill="#fff"/>
                                    </svg>
                                </div>

                                <div class="top-button-left pl-5 pr-5">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="8.74"
                                        height="9.712"
                                        viewBox="0 0 8.74 9.712">
                                        <path
                                            id="路径_1557"
                                            data-name="路径 1557"
                                            d="M128.85,87.276h-.486a.364.364,0,0,1,0-.728h8.012a.364.364,0,0,1,0,.728h-6.8V93.71a.607.607,0,0,0,.607.607h4.37a.607.607,0,0,0,.607-.607V88.368a.364.364,0,1,1,.728,0V93.71a1.335,1.335,0,0,1-1.335,1.335h-4.37a1.335,1.335,0,0,1-1.335-1.335Zm2.549-1.214a.364.364,0,0,1,0-.728h1.942a.364.364,0,1,1,0,.728Zm-.364,3.278a.364.364,0,1,1,.728,0v2.913a.364.364,0,1,1-.728,0Zm1.942,0a.364.364,0,0,1,.728,0v2.913a.364.364,0,0,1-.728,0Z"
                                            transform="translate(-128 -85.333)"
                                            fill="#fff"/>
                                    </svg>
                                </div>
                            </div>

                            <div class="flex flex-row items-center justify-between">
                                <!-- 放大时间轴 -->
                                <div class="top-button-right pl-5 pr-5" @click="clickZoomIn"
                                    :style="{
                                        pointerEvents:
                                        maxFrameOfMaterial === 0 || frameWidth === maxFrameWidth
                                            ? 'none'
                                            : 'auto',
                                        opacity:
                                        maxFrameOfMaterial === 0 || frameWidth === maxFrameWidth
                                            ? 0.2
                                            : 1,}">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="10.553"
                                        height="10.524"
                                        viewBox="0 0 10.553 10.524">
                                        <path
                                            id="路径_1558"
                                            data-name="路径 1558"
                                            d="M137.633,135.634H133.27v-4.38a.44.44,0,1,0-.88,0v4.377l-4.431,0h0a.44.44,0,0,0,0,.88l4.434,0V140.9a.44.44,0,1,0,.88,0v-4.384h4.361a.44.44,0,0,0,0-.88Z"
                                            transform="translate(-127.518 -130.816)"
                                            fill="#fff"/>
                                    </svg>
                                </div>
                            
                                <!-- 缩小时间轴 -->
                                <div class="top-button-right pl-5 pr-5"
                                    @click="clickZoomOut"
                                    :style="{
                                        pointerEvents:
                                        maxFrameOfMaterial === 0 || frameWidth === minFrameWidth
                                            ? 'none'
                                            : 'auto',
                                        opacity:
                                        maxFrameOfMaterial === 0 || frameWidth === minFrameWidth
                                            ? 0.2
                                            : 1, }">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="10.553"
                                        height="0.885"
                                        viewBox="0 0 10.553 0.885">
                                        <path
                                            id="路径_1559"
                                            data-name="路径 1559"
                                            d="M137.633,135.634H133.27v-.006c.008.008-.2.006-.44.006l-.44-.006v0l-4.431,0h0a.44.44,0,0,0,0,.88l4.434,0v0c.019,0,.2,0,.44,0s.464.006.44,0v.006h4.361a.44.44,0,0,0,0-.88Z"
                                            transform="translate(-127.518 -135.63)"
                                            fill="#fff"/>
                                    </svg>
                                </div>

                                <!-- 合适的时间轴 -->
                                <div class="top-button-right pl-5 pr-5"
                                    @click="start">
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="10.583"
                                        height="10.524"
                                        viewBox="0 0 10.583 10.524">
                                        <path
                                            id="路径_1560"
                                            data-name="路径 1560"
                                            d="M5.217,6.019c0-.288-.229-.4-.506-.4H.756a.409.409,0,1,0,0,.817H3.83L.443,9.814A.391.391,0,0,0,1,10.367l3.412-3.4v3.111a.41.41,0,1,0,.82,0V6.019m5.256-2.005H7.41L10.8.639a.391.391,0,1,0-.555-.553l-3.4,3.4V.375a.41.41,0,1,0-.82,0V4.41c0,.012.012.012.012.024a.429.429,0,0,0,.109.288.364.364,0,0,0,.374.1h3.954a.406.406,0,0,0,.41-.408.4.4,0,0,0-.4-.4Z"
                                            transform="translate(-0.329 0.035)"
                                            fill="#fff"/>
                                    </svg>
                                </div>  
                            </div>          
                        </div>
                    </div>
                    <!-- 插入结束 -->
                    <!-- 时间轴 -->
                    <!-- <div>
                        这里是一个时间刻度表
                    </div> -->
                    <!-- 资源时间轴区域 -->
                    <div class="max-h-26vh max-w-140vh mt-5 min-h-25vh min-w-140vh " >
                        <el-scrollbar always>
                            <frame-timeline :videoList="videoFramesList"/>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
            <!-- 第二个竖向子区域，列宽比为1 -->
            <div class="col-span-1 grid grid-rows-2 gap-1
                        bg-black text-white text-center
                        rounded-lg">
                <div class="row-span-1 bg-customBlack rounded-lg w-full h-full
                            m-0 p-0">
                    资源属性
                </div>
                <div class="row-span-1 bg-customBlack rounded-lg w-full h-full 
                            m-0 p-0 
                            flex flex-col">
                    <!-- 图像层排序 -->
                    <div class="text-size-6 text-start items-center text-gray
                                mt-1 ml-1 pl-2 border-b-solid
                                ">图像图层列表</div>
                    <el-scrollbar always class="itemList m-1">
                        <div class=" ml-1 text-start
                            text-size-6 text-start items-center text-gray 
                            bg-opacity-5 bg-white mt-1 mb-1 rounded-lg"
                            draggable="true"
                            @dragstart="dragstart($event, idx)"
                            @dragenter="dragenter($event, idx)"
                            v-for="(item, index) in videoList">{{ videoList[index].getFile()}}</div>
                    </el-scrollbar>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElScrollbar , ElProgress} from 'element-plus';
import NewCard from './components/NewCard.vue';
import CanvasCard from './components/CanvasCard.vue';
import { getAllMedias, videoDetail, uploadSelectVideo, uploadProgress} from '@/scripts/vediosApi.ts';
import FrameTimeline from './components/FrameTimeline.vue';
// import {getVideoThumbnails} from '@/scripts/readFrame/getFrame.ts'
import { onMounted, reactive ,ref, watch} from 'vue';
import {EditElement} from '@/scripts/store'


// ------------------------------------------
const allMedias = reactive([]);

const selectFile = async (event) =>{
    await uploadSelectVideo(event);
    getAllMedias().then((medias) => {
        allMedias.value = medias; 
    });
};
// ------------------------------------------
const handleClick = (e)=>{
    // e是一个字符串，file
    // videoList.value.push(e);
    // console.log('videoList更新后：', e, videoList.value);
    let newElement = new EditElement(e, 'video', videoList.value.length);
    videoList.value.push(newElement);
    console.log('videoList更新后：', newElement, videoList.value);
}

// ------------------------------------------
const videoList = ref([
    // 'http://localhost:8080/cut_40s/cut_40s.mp4',
    // 'http://localhost:8080/digitalhuman/digitalhuman.mp4',
    // 'http://localhost:8080/竖版2/竖版2.5-3.mp4'
]);

const videoFramesList = ref([]);
const cost = ref(0);
let frameFetchWorker;

let oldVideoFile = [];
watch(videoList, (newVal)=>{
    console.log("检测到视频帧数据需要更新-------");
    console.log("newVal:", newVal);
    console.log("oldVal:", oldVideoFile);
    if (newVal.length > oldVideoFile.length) {
        console.log("开始添加新的视频帧资源------");
        const addedItems = newVal.filter(item => !oldVideoFile.includes(item));

        for (let newItem of addedItems){
            loadFrame(newItem.getFile(), 10e6, 20e6, 5000, videoFramesList);
        }
    }else{
        const removedItems = oldVideoFile.filter(item => !newVal.includes(item));
        if(removedItems){
            let index = oldVideoFile.indexOf(removedItems);
            videoFramesList.value.splice(index, 1);
        }
    }
    oldVideoFile = [...newVal];
    console.log('--oldVideoFile:', oldVideoFile);
}, { deep: true })

// ------------------------------------------


// ------------------------------------------
let dragIndex = 0;
const dragstart = (e, index)=>{
    e.stopPropagation();
    dragIndex = index;
}
const dragenter = (e,index)=>{
    e.preventDefault();
    if (dragIndex !== index){
        const source = videoList.value[index];
        videoList.value.splice(dragIndex, 1);
        videoList.value.splice(index, 0, source);
        dragIndex = index;
    }
}
// ------------------------------------------
const loadFrame = (url, start, end, step, frameList)=>{
    frameFetchWorker = new Worker(
        new URL("@/scripts/readFrame/getFrame.ts", import.meta.url).href, { type: 'module' });
    // let startTime = performance.now();
    try{
        frameFetchWorker.postMessage({
            url: url,
            start: start,
            end: end,
            step: step
        });
        frameFetchWorker.onmessage = (event)=>{
            if (event.data && event.data.status){
                if (event.data.status === 'success'){
                    console.log('帧数据加载成功:', event.data.status);
                    frameList.value.push(event.data.data);
                    console.log(`frameList.value:`, frameList.value);
                }
            }
        };               
    }catch (error) {
        console.error('生成缩略图时出错:', error);
    }
}


onMounted(
    async () => {
// ------------------------------------------
        getAllMedias().then((medias) => {
            allMedias.value = medias; 
        });
// ------------------------------------------
        // videoFramesList.value = new Array(videoList.value.length).fill([]);
        console.log('videoFramesList的初始值：', videoFramesList.value);
        frameFetchWorker = new Worker(
            new URL("@/scripts/readFrame/getFrame.ts", import.meta.url).href, { type: 'module' });
        console.log('frameFetchWorker加载成功');

        let index = 0;
        for(var i = 0; i < videoList.value.length; i++){
            console.log(`这是第${i}个数据的链接：`, videoList.value[i].getFile());
            loadFrame(videoList.value[i].getFile(), 10e6, 20e6, 5000, videoFramesList)

        }

        console.log("videoFramesList:", videoFramesList.value);


// ------------------------------------------
// ------------------------------------------

    });
</script>